第181期:THREEJS中的灯光

您所在的位置:网站首页 threejs 发光矩形柱 第181期:THREEJS中的灯光

第181期:THREEJS中的灯光

2023-06-06 21:33| 来源: 网络整理| 查看: 265

封面图

第181期:THREEJS中的灯光_前端

想像一下我们正在导演一场电影,灯光在影视中的应用是必不可少的,它的左右有很多:

照明演出,使观众看清演员表演和景物形象;导引观众视线塑造人物形象,烘托情感和展现舞台幻觉;创造剧中需要的空间环境;渲染剧中气氛等等AmbientLight 环境光

环境光。

该灯光在全局范围内均匀地照亮场景中的所有对象。

该灯光不能用于投射阴影,因为它没有方向。

代码示例:

const light = new THREE.AmbientLight( 0x404040 ); // soft white light scene.add( light );

其构造器参数如下:

color- 灯光颜色。默认0xffffff.intensity- 灯光强度。默认 1 。AmbientLightProbe 环境光探测器

环境光探测器。

光探测器是将光添加到3D场景的一种替代方式。AmbientLightProbe是场景中单个环境光的光估计数据。

与经典光源(例如定向灯、点光源或聚光灯)不同,光探测器不发光。相反,它们存储关于穿过3D空间的光的信息。在渲染过程中,通过使用来自光探测器的数据来近似达到3D对象反光的效果。

光探测器通常由environmentmaps(辐射)环境图创建。LightProbeGenerator类可用于从CubeTexture或WebGLCubeRenderTarget的实例创建光探测器。然而,光估计数据也可以以其他形式提供,例如通过WebXR。这使得能够渲染对真实世界照明做出反应的增强现实内容

目前three.js中的探针实现支持所谓的漫射光探针。

这种类型的光探测器在功能上等同于辐照度环境图。

其构造器参数如下:

color- 灯光颜色。默认0xffffff.intensity- 灯光强度。默认 1 。DirectionLight 平行光

平行光是向特定方向发射的光。这种光的行为就好像它是无限遥远的,并且从它产生的光线都是平行的。这方面的常见用例是模拟日光;太阳离得足够远,它的位置可以被认为是无限的,所有来自它的光线都是平行的。

这种光可以投射阴影。 示例代码:

//Create a DirectionalLight and turn on shadows for the light const light = new THREE.DirectionalLight( 0xffffff, 1 ); light.position.set( 0, 1, 0 ); //default; light shining from top light.castShadow = true; // default false scene.add( light ); //Set up shadow properties for the light light.shadow.mapSize.width = 512; // default light.shadow.mapSize.height = 512; // default light.shadow.camera.near = 0.5; // default light.shadow.camera.far = 500; // default

平行光的一个常见的问题是设置旋转没有效果。这是因为three.js的DirectionalLight相当于其他应用程序中通常称为“目标直射光”的东西。

这意味着它的方向计算为从灯光的位置指向目标的位置(而不是只有旋转组件的“自由直射光”)。

这样做的原因是允许光线投射阴影——阴影摄影机需要一个位置来计算阴影。

它的构造器参数如下:

color- 灯光颜色。默认0xffffff.intensity- 灯光强度。默认 1 。

实例属性如下:

castShadow-如果设置为true,将投射动态阴影。提示:这是昂贵的,需要调整以使阴影看起来正确。isDirectionalLight-只读属性,用于检查给定对象的类型是否为DirectionalLightposition- 位置将其设置为等于Object3D.DEFAULT_UP(0,1,0),以便灯光从上到下照射。shadow-方向光阴影。用于计算此灯光的阴影的DirectionalLightShadow。HemisphereLight 半球光

半球光

位于场景正上方的光源,颜色从天空颜色渐变为地面颜色。

此灯光不能用于投射阴影。

代码示例:

const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 ); scene.add( light )

其构造器参数如下:

skyColor-(可选)天空的十六进制颜色。默认值为0xffffff。groundColor-(可选)地面的十六进制颜色。默认值为0xffffff。skyColor-(可选)灯光强度/强度的数值。默认值为1。PointLight 点光源

从一个点向所有方向发射的光。这方面的一个常见用例是灯泡发出的光。

此灯光可以投射阴影。

示例代码如下:

//Create a PointLight and turn on shadows for the light const light = new THREE.PointLight( 0xffffff, 1, 100 ); light.position.set( 0, 10, 4 ); light.castShadow = true; // default false scene.add( light ); //Set up shadow properties for the light light.shadow.mapSize.width = 512; // default light.shadow.mapSize.height = 512; // default light.shadow.camera.near = 0.5; // default light.shadow.camera.far = 500; // default

其构造器参数如下:

color- 灯光颜色。默认0xffffff.intensity- 灯光强度。默认 1 。distance—灯光的最大范围。默认值为0(无限制)。decay-衰减度即光线沿着光线的距离变暗的量。默认值为2。RectAreaLight 矩形光

矩形光在一个矩形平面上均匀地发射光线。这种光源类型可用于模拟光源,例如明亮的窗户或条形照明,或者有点类似于商店的招牌的效果。

第181期:THREEJS中的灯光_构造器_02

需要注意的是:

这种光源不支持阴影只支持MeshStandardMaterial和MeshPhysicalMaterial这两种材质。必须将RectAreaLightUniformsLib库导入到场景中并进行初始化。

示例代码:

const width = 10; const height = 10; const intensity = 1; const rectLight = new THREE.RectAreaLight( 0xffffff, intensity, width, height ); rectLight.position.set( 5, 5, 0 ); rectLight.lookAt( 0, 0, 0 ); scene.add( rectLight ) const rectLightHelper = new RectAreaLightHelper( rectLight ); rectLight.add( rectLightHelper );

其构造器参数如下:

color- 灯光颜色。默认0xffffff.intensity- 灯光强度。默认 1 。width- 灯光宽度。默认10。height-灯光高度。默认10。

其实例属性有:

intensity- 灯光强度。默认 1 。isRectAreaLight-用于检查给定对象是否为RectAreaLight类型。power-功率。 在物理正确模式下,功率是以流明(lm)为单位测量的光的发光功率。SpotLight 聚光灯

聚光灯。如果有过搞装修的经验,你去建材市场上买灯的时候这种灯也叫射灯、或者筒灯。

这种光从一个方向的单个点发出,沿着一个圆锥体,该圆锥体的大小随着光的传播而增加。

示例代码:

const spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( 100, 1000, 100 ); spotLight.map = new THREE.TextureLoader().load( url ); spotLight.castShadow = true; spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024; spotLight.shadow.camera.near = 500; spotLight.shadow.camera.far = 4000; spotLight.shadow.camera.fov = 30; scene.add( spotLight );

其构造器参数如下:

color-灯光的十六进制颜色。默认值为0xffffff(白色)。intensity -强度。灯光强度/强度的数值。默认值为1。distance—灯光的最大范围。默认值为0(无限制)。angle-光从其上限为Math.PI/2的方向散射的最大角度。penumbra-由于半影而衰减的聚光灯圆锥体的百分比。取值介于0和1之间。默认值为零。decay-光线沿着光线的距离变暗的量。

构造器的参数中的量,其实也是它的实例属性。

总结

这里主要介绍了threejs 中的光源类型,比如:环境光、环境光探测器、平行光、半球光、点光源、矩形光以及射灯光。

这里只做简单点介绍以及展示其构造器中的相关属性,同时展示简单的示例代码,具体的使用方式即场景需要我们更具具体的业务需求选择对应的灯光类型来实现我们具体的需求。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3